@import "../../base/base";
@prefix:slide-component;
.@{prefix}{
  width: 100%;
  .@{prefix}-top{
    width: @box-width;
    .margin-center;
    text-align: center;
    padding: 10px 0 20px;
    margin-bottom: 20px;
    background: url("./img/line.png") no-repeat center bottom;
    h3{
      font-weight: normal;
      font-size: 24px;
      color: #666;
    }
  }
  .@{prefix}-container {
    width: @box-width;
    .margin-center;
    overflow: hidden;
    .@{prefix}-swiper-page {
      .@{prefix}-link {
        display: block;
        width: 100%;
        height: 100%;
        .@{prefix}-imgContainer {
          width: 100%;
          height: 150px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .@{prefix}-content {
          text-align: center;
          color: #666;
          padding: 20px 10px 0;
          h3 {
            font-size: 20px;
            font-weight: normal;
            margin-bottom: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          p {
            font-size: 14px;
            padding-bottom: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      transition: 1s;
      &:hover{
        margin-top: -15px;
        .@{prefix}-content {
          background: @base-color;
          color:#fff;
          h3{
            color:#fff;
          }
        }
      }
    }
  }
}